<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS运动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapAll {
            padding: 10px;
        }

        .buttons button+button {
            margin-left: 10px;
        }

        .wrap {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin-top: 10px;
            position: relative;
        }

        .sub {
            width: 10px;
            height: 10px;
            background-color: #6ff;
            position: absolute;
            /* left: 100px; */
        }

        .box {
            width: 10px;
            height: 10px;
            background-color: #f66;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wrapAll">
        <div class="buttons">
            <button class="up">上</button>
            <button class="down">下</button>
            <button class="left">左</button>
            <button class="right">右</button>
            <button class="pause">暂停</button>

        </div>
        <div class="wrap">
            <div class="sub"></div>
            <div class="box"></div>
        </div>
    </div>

</body>
<script>
    var up = document.getElementsByClassName("up")[0];
    var down = document.getElementsByClassName("down")[0];
    var left = document.getElementsByClassName("left")[0];
    var right = document.getElementsByClassName("right")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var box = document.getElementsByClassName("box")[0];

    var timer = null;

    //页面加载时让sub向右走
    animate(sub, "left", 1090);
    //页面加载时随机box的位置
    randopos();



    // 左运动
    left.onclick = function () {
        animate(sub, "left", 0);
    }

    // 暂停
    pause.onclick = function () {
        clearInterval(timer);
    }

    // 右运动
    right.onclick = function () {
        animate(sub, "left", 1090);
    }

    // 上
    up.onclick = function () {
        animate(sub, "top", 0);
    }

    // 下
    down.onclick = function () {
        animate(sub, "top", 590);
    }


    document.onkeydown = function (e) {
        var e = e || window.event;
        var keyCode = e.which || e.keyCode;
        // console.log(keyCode,e.key,e.code);

        if (keyCode == 37 || keyCode == 65) { //左
            animate(sub, "left", 0);
        } else if (keyCode == 38 || keyCode == 87) { //上
            animate(sub, "top", 0);
        } else if (keyCode == 39 || keyCode == 68) { //右
            animate(sub, "left", 1090);
        } else if (keyCode == 40 || keyCode == 83) { //下
            animate(sub, "top", 590);
        } else if (keyCode == 32) {
            clearInterval(timer);
        }
    }


    //Js运动 传入 元素，css样式，终点
    function animate(ele, attr, end) {
        //传统的获取非行内样式
        //cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
        var cur = parseFloat(getStyle(ele, attr));
        end = parseFloat(end);
        var speed = end > cur ? 1 : -1;
        clearInterval(timer);
        timer = setInterval(function () {
            cur += speed;
            ele.style[attr] = cur + "px";
            // console.log(cur, end, speed);
            if (Math.abs(end - cur) <= Math.abs(speed)) {
                clearInterval(timer);
                ele.style[attr] = end + "px";
                alert("游戏结束");
            }
            // console.log(box.offsetLeft, box.offsetTop);
            // console.log(sub.offsetLeft, sub.offsetTop);
            var bl = box.offsetLeft;
            var bt = box.offsetTop;
            var sl = sub.offsetLeft;
            var st = sub.offsetTop;
            if ((sl >= bl - 8 && sl <= bl + 8) && (st >= bt - 8 && st <= bt + 8)) {
                var len = parseInt(getStyle(sub,"width"));
                len += 10;
                sub.style.width = len + "px";
                randopos();
            }
        }, 10);
    }

    //33.js获取非行内样式的兼容ie方法
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {  //取值 判断方法是否存在   存在:常规浏览器
            return window.getComputedStyle(ele)[attr];
        } else {  //不存在 => IE
            return ele.currentStyle[attr];
        }
    }

    function randopos() {
        //随机一个box的位置
        randomX = Math.round(20 + Math.random() * 1000);
        randomY = Math.round(20 + Math.random() * 580);

        box.style.left = randomX + "px";
        box.style.top = randomY + "px";
    }
</script>

</html>